<script setup>
import { ref, inject, nextTick, onMounted } from "vue";

const props = defineProps({
  row: {
    type: Number,
    default: 0,
  },
  col: {
    type: Number,
    default: 0,
  },
  argList: {
    type: Array,
    default: function () {
      // 这个 return 的对象就是 cover 属性的默认值
      return [];
    },
  },
  tableHead: {
    type: Array,
    default: function () {
      return [];
    },
  },
  ps: {
    type: Array,
    default: function () {
      return [];
    },
  },
  qs: {
    type: Array,
    default: function () {
      return [];
    },
  },
  ans: {
    type: Array,
    default: function () {
      return [];
    },
  },
});

// 修改数据格式
const args = ref([]);
const initArgs = () => {
  if (props.row === 0 || props.col === 0) {
    return;
  }
  for (let i = 0; i < props.row + 1; i++) {
    const one = {};
    one["id"] = props.argList[i][String(0)];
    one[String(0)] = props.argList[i][String(0)];
    for (let j = 1; j < props.col; j += 2) {
      let s =
        "[ " +
        props.argList[i][String(j)] +
        " , " +
        props.argList[i][String(j + 1)] +
        " ] ";
      one[String((j + 1) / 2)] = s;
    }
    if (Boolean(props.ps.length)) {
      one["p"] = props.ps[i].item;
    }
    if (Boolean(props.qs.length)) {
      one["q"] = props.qs[i].item;
    }
    if (i === 0) {
      one["ans"] = "/";
    } else {
      one["ans"] = props.ans[i - 1];
    }
    args.value.push(one);
  }
};
initArgs();

// 计算
const submitForm = {
  arguments: [],
  ps: [],
  qs: [],
};
const formModel = ref({ ...submitForm });
const getArgs = () => {
  formModel.value = Object.keys(submitForm).reduce((obj, key) => {
    obj[key] = [];
    return obj;
  }, {});
  for (let i = 0; i <= props.row; i++) {
    for (let j = 1; j <= props.col; j++) {
      formModel.value.arguments.push(props.argList[i][String(j)]);
    }
  }
  for (let i = 0; i < props.row + 1; i++) {
    if (Boolean(props.ps.length)) {
      formModel.value.ps.push(Number(args.value[i]["p"]));
    }
    if (Boolean(props.qs.length)) {
      formModel.value.qs.push(Number(args.value[i]["q"]));
    }
  }
  return formModel.value;
  //   console.log(formModel.value);
};

// p
const pIdOnChange = ref("");
const pInputValue = ref("");
const pTagInput = ref(null);
const pShowInput = (id, p) => {
  pIdOnChange.value = id;
  pInputValue.value = p;
  nextTick(() => {
    pTagInput.value.focus();
  });
};
// 选择器按下回车，tag+1
const pHandleEnter = (id) => {
  if (pInputValue.value !== null && pInputValue.value !== "") {
    args.value.some((item, index) => {
      if (item.id === id) {
        item.p = pInputValue.value;
        return true;
      }
    });
    pInputValue.value = "";
    pIdOnChange.value = "";
  }
};
// 选择器失去焦点，变回按钮
const pBlur = () => {
  pIdOnChange.value = "";
  pInputValue.value = "";
};

// q
const qIdOnChange = ref("");
const qInputValue = ref("");
const qTagInput = ref(null);
const qShowInput = (id, q) => {
  qIdOnChange.value = id;
  qInputValue.value = q;
  nextTick(() => {
    qTagInput.value.focus();
  });
};
// 选择器按下回车，tag+1
const qHandleEnter = (id) => {
  if (qInputValue.value !== null && qInputValue.value !== "") {
    args.value.some((item, index) => {
      if (item.id === id) {
        item.q = qInputValue.value;
        return true;
      }
    });
    qInputValue.value = "";
    qIdOnChange.value = "";
  }
};
// 选择器失去焦点，变回按钮
const qBlur = () => {
  qIdOnChange.value = "";
  qInputValue.value = "";
};

// x0（第0行）不同颜色
const rowColor = ({ row, rowIndex }) => {
  if (rowIndex === 0) {
    return "warning-row";
  } else {
    return "";
  }
};

defineExpose({
  getArgs,
});
</script>

<template>
  <el-container class="layout-container">
    <el-table
      :data="args"
      border
      :row-class-name="rowColor"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in tableHead"
        :key="item"
        align="center"
        :prop="String(index)"
        :label="item"
      />

      <el-table-column
        v-if="Boolean(ps.length)"
        prop="p"
        align="center"
        label="p"
      >
        <template v-slot="{ row }">
          <el-input
            ref="pTagInput"
            v-if="row.id === pIdOnChange"
            v-model="pInputValue"
            placeholder="请输入p值"
            @keyup.enter="pHandleEnter(row.id)"
            @blur="pBlur"
          ></el-input>
          <div
            v-else
            style="margin-left: 10px"
            @click="pShowInput(row.id, row.p)"
          >
            {{ row.p }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        v-if="Boolean(qs.length)"
        prop="q"
        align="center"
        label="q"
      >
        <template v-slot="{ row }">
          <el-input
            ref="qTagInput"
            v-if="row.id === qIdOnChange"
            v-model="qInputValue"
            placeholder="请输入q值"
            @keyup.enter="qHandleEnter(row.id)"
            @blur="qBlur"
          ></el-input>
          <div
            v-else
            style="margin-left: 10px"
            @click="qShowInput(row.id, row.q)"
          >
            {{ row.q }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="ans" align="center" label="结果" />
    </el-table>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  .el-table {
    :deep(.warning-row) {
      background: oldlace;
    }
  }
  :deep(.el-input) {
    text-align: center;
  }
}
</style>